<template>
  <mu-flex id="medical-record-root" direction="column">
    <mu-appbar id="appBar" :z-depth="2" color="primary" :title="appBarTitle"></mu-appbar>

    <mu-flex fill id="content-wrap">
      <mu-load-more id="load-more" :loaded-all="isLoadedAll" :loading="isLoading" @load="onLoad">
        <mu-list toggle-nested :nested-indent="false">
          <template v-for="(value, index) in listData">
            <mu-list-item
                    class="list-item"
                    button
                    nested
                    @toggle-nested="open = index"
                    :open="open === index"
                    :ripple="true"
                    :key="index"
                    :value="index">
              <mu-list-item-content class="list-item-content">
                <div class="department">{{ value.department + (value.doctor ? ' ' + value.doctor : '') }}</div>
                <div class="hospital">{{ value.hospitalName }}</div>
                <div class="time">{{
                  value.startTime[0] + '.' +
                  value.startTime[1] + '.' +
                  value.startTime[2] + ' — ' +
                  value.stopTime[0] + '.' +
                  value.stopTime[1] + '.' +
                  value.stopTime[2]
                  }}</div>
              </mu-list-item-content>

              <mu-list-item-action class="list-item-action">
                <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
              </mu-list-item-action>

              <mu-list-item class="nested-content" slot="nested">
                <mu-list-item-content>
                  <div class="address">{{ value.hospitalAddress }}</div>
                  <div class="telephone">{{ value.hospitalTel }}</div>
                </mu-list-item-content>
              </mu-list-item>
            </mu-list-item>

            <mu-divider/>
          </template>

        </mu-list>
      </mu-load-more>
    </mu-flex>

    <mu-button id="fab" fab color="primary" @click="onFabClick">
      <mu-icon value="add"></mu-icon>
    </mu-button>
  </mu-flex>
</template>

<script lang="ts">
  import AppointmentService from "@/phr/service/hospital/AppointmentService";
  import {SUCCESS} from "@/phr/common/ErrorCode";

  let constant = {
    self_registration: "诊疗记录",
  };

  export default {
    data() {
      return {
        open: -1,
        appBarTitle: constant.self_registration,
        listData: [],
        // 后台接口未提供分页功能，因此恒为 true
        isLoadedAll: true,
        isLoading: false,
      }
    },
    mounted() {
      this.$nextTick(() => {
        AppointmentService.queryAppointmentHistory()
            .then(res => {
              if (res.code === SUCCESS) {
                this.listData = res.value.reverse();
              } else {
                this.$toast.info(res.message);
              }
            })
            .catch(e => {
              console.log(e);
              this.$toast.info("网络异常");
            });
      });
    },
    methods: {
      onFabClick() {
        this.$router.push({name: "Registration"});
      },
      onLoad() {
        // do nothing
        // 后台接口未提供分页功能，mu-load-more 组件的 isLoadedAll 属性恒为 true
      },
    }
  }
</script>

<style scoped>
  #medical-record-root {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  #content-wrap {
    overflow: auto;
    flex: 1 1 0 !important;
    width: 100%;
  }

  #appBar {
    width: 100%;
  }

  #fab {
    position: fixed;
    right: 48px;
    bottom: 48px;
  }

  .list-item {
    width: 100%;
    height: auto;
  }

  #load-more {
    width: 100%;
  }

  .list-item-content {
    padding: 8px 0;
  }

  .list-item-content div {
    line-height: 1.5;
  }

  .department {
    font-size: 16px;
    color: #212121;
  }

  .hospital {
    font-size: 14px;
    color: #424242;
  }

  .address, .telephone {
    font-size: 14px;
    color: #616161;
  }

  .time {
    font-size: 12px;
    color: #616161;
    margin-top: 4px;
  }

  .list-item-action {
    min-width: unset;
  }

  .nested-content {
    background: #eeeeee;
    padding: 8px 0;
  }
</style>

<style>
  #medical-record-root .list-item div {
    height: 100%;
  }
</style>